<script setup lang="ts">
/**
 * @name ReportCenterEnergyUse
 * @description 能耗用途统计表
 */
import { PAGING } from '@/constant'
// ------------------use------------------
// #region
const { vLoading, withLoading } = useDefineLoading()
const [tableData, setTableData] = useState<any[]>([])
// #endregion
// ------------------静态变量------------------
// #region
// #endregion
// ------------------动态变量------------------
// #region

// #endregion
// ------------------ref-----------
// #region
const time = ref<string>('')
const timeType = ref<string>('date')
// #endregion
// ------------------reactive------
// #region

// #endregion
// ------------------computed------
// #region

// #endregion
// ------------------生命周期------------------
// #region
onMounted(() => {
  getTableData()
})
// #endregion
// ------------------内置方法---------------------
// #region
// #endregion
// ------------------方法---------------------
// #region
async function getTableData() {
  await withLoading(sleep)(1000)
  setTableData(Array.from({ length: 20 }).fill(0))
}
function search() {
  getTableData()
}
// #endregion
</script>

<template>
  <div
    class="padding-sm flex-direction box-border flex align-end container"
  >
    <el-form
      inline
      label-width="80px"
      label-position="left"
      class="flex-incompressible width-fill"
    >
      <el-form-item label="报表类型">
        <el-select
          v-model="timeType"
          placeholder="请选择日报类型"
        >
          <el-option label="年" value="year" />
          <el-option label="月" value="month" />
          <el-option label="日" value="date" />
        </el-select>
      </el-form-item>
      <el-form-item label="统计区间">
        <el-date-picker
          v-model="time"
          :type="(timeType as any)"
          placeholder="请选择统计区间"
          @change="getTableData"
        />
      </el-form-item>
      <el-form-item>
        <el-button plain type="primary" @click="search">
          统计
        </el-button>
        <el-button plain>
          导出
        </el-button>
      </el-form-item>
    </el-form>
    <el-table
      v-loading
      :data="tableData"
      class="width-fill flex-fillRemaining"
    >
      <el-table-column
        type="index"
        label="序号"
        width="80"
      />
      <el-table-column label="能源用途">
        购进已消费
      </el-table-column>
      <el-table-column label="电力(千瓦时)">
        12200
      </el-table-column>
      <el-table-column label="其它原煤(吨)">
        221.29
      </el-table-column>
      <el-table-column label="热力(百万千焦)">
        ----
      </el-table-column>
    </el-table>
    <el-pagination
      hide-on-single-page
      :page-sizes="PAGING.PAGE_SIZES"
      layout="total, sizes, prev, pager, next, jumper"
      :total="20"
      background
      class="flex-incompressible margin-top-sm"
    />
  </div>
</template>

<style lang="scss" scoped>
.container {
  --container-left-w: 240px;
  &-left {
    width: var(--container-left-w);
    border: 1px solid var(--el-border-color-light);
    border-radius: 4px;
    transition: all var(--motion-bezier) 0.3s;
    &:hover {
      box-shadow: 0 8px 32px #0000000d;
    }
  }
}
//------------------组件样式------------------
//-------------样式穿透-------------
</style>
